<template>
    <div>
        <h1>房号显示</h1>
        房间号 <input type="text" v-model="info.fjh">
        门店外建
        <select v-model="info.showid">
            <option value="">请选择</option>
            <option :value="itme.Id"  v-for="itme in lisr.list":key="itme.Id"> {{ itme.ShopName }}</option>
        </select>
        <input type='button' value="查询" class="btn btn-primary" @click="getlists">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="CheckedAll"></td>
                    <td>Id</td>
                    <td>房间号</td>
                    <td>门店外建</td>
                    <td>房型外建</td>
                    <td>房态</td>
                </tr>

                <tr v-for="itme in data.list" :key="itme.Id">
                    <td><input type="checkbox" v-model="ids" :value="itme.Id" @change="CheckedOne"></td>
                    <td>{{ itme.Id }}</td>
                    <td>{{ itme.FJH }}</td>
                    <td>{{ itme.ShopName }}</td>
                    <td>{{ itme.HouseTypeName }}</td>
                    <td>{{ itme.LX }}</td>
                </tr>
            </tbody>
        </table>
        <span><b>共{{ data.totalcount }}条</b></span>
        <span><b>每页{{ info.pagesize }}条</b></span>
        <span><b>共{{ info.pageIndex }}/{{ data.totalpage }}页</b></span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageIndex-1)">
        <span v-for="itme in data.totalpage"@click="gopage(itme)">
        {{ itme }}
        </span>
        <input type="button" value="下一页" @click="gopage(info.pageIndex+1)">
        <input type="button" value="尾页" @click="gopage(data.totalpage)">
        <input type="number" v-model="info.pageIndex">
        <input type="button" value="跳转" @click="gopage(info.pageIndex)">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const rouder=useRouter();
const roude=useRoute();
let lisr:any=reactive({
    a:[]
})
let info1:any=reactive({
    pageIndex:1,
    pagesize:100,
    names:'',
    addres:''
})
let data:any=reactive({
    list:[],
    totalcount:0,
    totalpage:0
})
let info:any=reactive({
    pageIndex:1,
    pagesize:2,
    fjh:'',
    showid:''
})

let checked:any=ref(false);
let ids:any=ref([]);

onMounted(()=>{
    getlists();
    getlist();
})

const getlists=()=>{
    axios({
        url:'/api/FX/GetShow',
        method:'get',
        params:info
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data)
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
const show=()=>{
    info.pageIndex=1;
    getlists();
}
const gopage=(num:any)=>{
    if(num<1)
{
    info.pageIndex=1;
    return;

}
if(num>data.totalpage)
{
    info.pageIndex=data.totalpage;
    return;
}
info.pageIndex=num;
    getlists();
};

const getlist=()=>{
    axios({
        url:'/api/Shop/GetShow',
        method:'get',
        params:info1
    })
    .then((res)=>{
        console.log(res);
        Object.assign(lisr,res.data)
    })
    .catch((err)=>{
        console.log(err);
        
    })

}
//选中一个
const CheckedOne=()=>{
    if(ids.value.length==data.list.length)
    {
        checked.value=true;
    }
    else
    {
        checked.value=false;
    }
}
//全选全不选
const CheckedAll=()=>{
    checked.value=!checked.value
    if(checked.value==true)
    {
        ids.value=data.list.map((itme:any)=>{
            return itme.Id
        })
    }
    else
    {
        ids.value=[];
    }
}
</script>

<style scoped>

</style>